import { ArrowRight } from '@nutui/icons-react-taro'
import { Avatar, Cell, CellGroup } from '@nutui/nutui-react-taro'
import { Text, View } from '@tarojs/components'
import Card from '../../components/card'
import Layout from '../../components/layout'
import { useNavigation } from '../../hooks/useNavigation'
import { useUserInfo } from '../../stores/user'
import './index.less'

const Profile = () => {
  const { navigateTo } = useNavigation()
  const { userInfo } = useUserInfo()

  const handleAddressManagement = () => {
    navigateTo('/pages/address-management/index')
  }

  const handleAboutUs = () => {
    navigateTo('/pages/about/index')
  }

  return (
    <Layout title='设置' showBack={false}>
      {/* User Profile */}
      <Card className='user-profile-card'>
        <View className='user-profile-content'>
          <Avatar size='large' src={userInfo?.avatar} className='user-avatar' />
          <View className='user-info'>
            <Text className='user-name'>{userInfo?.name}</Text>
            <Text className='user-company'>{userInfo?.status}</Text>
          </View>
        </View>
      </Card>

      {/* Account Settings */}
      <Card className='settings-card'>
        <CellGroup>
          <Cell title='手机号' extra={userInfo?.phone} className='settings-cell' />
          {/* <Cell title='微信号' extra='wechat_id' className='settings-cell' /> */}
        </CellGroup>
      </Card>

      {/* Other Settings */}
      <Card className='settings-card'>
        <CellGroup>
          <Cell
            title='地址管理'
            className='settings-cell clickable'
            onClick={handleAddressManagement}
            extra={<ArrowRight />}
          />
          <Cell title='关于我们' extra={<ArrowRight />} className='settings-cell clickable' onClick={handleAboutUs} />
        </CellGroup>
      </Card>
    </Layout>
  )
}

export default Profile
